<template>
  <uni-nav-bar title="福利券列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <!-- 切换 -->
  <view class="package" style="padding:0px;">
    <z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
  </view>
  <!-- 商品列表 -->
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package space-between" v-for="(item,index) in frinedList" :key="index"
      :style="{alignItems: 'flex-start',marginTop:index===0?'0px':'15rpx'}"
      @click="navTo('administrator/business/goodDetails?id='+item.id+'&shopID='+shopID)">
      <image :src="item.image" mode=""></image>
      <view class="direction-start illustrate">
        <view class="title">{{item.name}}</view>
        <!-- <view style="height:60rpx;">福利券说明</view> -->
        <view v-if="item.expirytime">有效期：{{item.expirytime}}</view>
      </view>
      <view>{{item.status}}</view>
    </view>
    <Popu v-if="frinedList.length<1" :pageHeight="pageHeight" :text="'暂无福利券列表'"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navTo, navBack } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { getHexiaoLog } from '@/gql/administrator';
  import { showLoading} from '@/utils/prompt';
  const list = [{ name: '全部' }, { name: '待核销' }, { name: '已核销' }]
  const current = ref(0)
  const pageHeight = ref();
  const frinedList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const shopID = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 110;
    },
  });
  onLoad((pearm) => {
    shopID.value = Number(pearm.id)
    init()
  })
  /**
    * 获取商品列表
    */
  function init() {
    showLoading()
    const payload = {
      query: getHexiaoLog,
      variables: {
        page: currentPage.value,
        store_id: shopID.value,
        status: current.value === 0 ? 9 : current.value === 1 ? 0 : 1
      },
    };
    toPublish(
      'ql/store/getHexiaoLog',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getHexiaoLog } = obj.data;
        frinedList.value = [...frinedList.value, ...getHexiaoLog.list];
        lastPage.value = getHexiaoLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  //tabs通知swiper切换
  function tabsChange(index : number) {
    current.value = index;
    currentPage.value = 1
    frinedList.value = []
    init();
  }
</script>

<style scoped lang="less">
  .package {
    image {
      width: 142rpx;
      height: 142rpx;
      // background: #FF7B48;
      border-radius: 10rpx;
      opacity: 0.8;
    }

    .title {
      width: 100%;
      font-size: 28rpx;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;

    }

    .illustrate {
      width: 62%;
      font-size: 24rpx;
      color: #666666;
      height: 142rpx;
      justify-content: space-between;
    }
  }
</style>
<style>
  .package>>>.z-tabs-conatiner {
    border-radius: 5px;
  }
</style>